<template>
  <div id="Search">
    <div class="search">
      <span @click="prev"><i class="fa fa-angle-left fa-2x ico"></i></span>
      <div>
        <span class="fa fa-search fa-lg"></span>
        <input type="text" v-model="observe" @keydown="down" placeholder="开始你的搜索之旅吧！" />
      </div>
      <button>搜索</button>
    </div>
    <div class="cont">
      <ul v-show="show">
        <li v-for="(item, index) in data" :key="index">{{item.title}}</li>
      </ul>
      <list v-show="list" :list="data" :dataIndex="dataIndex"></list>
    </div>
  </div>
</template>

<script>

import list from '../Classify/list'

export default {
  name: 'Search',
  components: {
    list
  },
  data () {
    return {
      data: [],
      datas: '',
      observe: '',
      show: false,
      index: '',
      list: false,
      getTitle: '',
      dataIndex: ''
    }
  },
  methods: {
    prev () {
      this.$router.go(-1)
    },
    down () {
      this.data = []
      this.axios.get('../../../static/json/list.json').then(item => {
        item.data.data.forEach((element, index) => {
          if (element.title.includes(this.observe)) {
            this.show = true
            this.data.push(element)
            this.datas = element
            this.index = index
            console.log(this.index)
          }
        })
        if (this.data.length === 1) {
          this.getTitle = this.datas.title
          this.list = true
          this.show = false
          this.data = this.data[0].cellphone
          console.log(this.data)
          console.log(this.getTitle)
        } else {
          this.list = false
        }
      })
      this.axios.get('../../../static/json/list.json').then(item => {
        item.data.data.forEach((items, index) => {
          if (this.getTitle === items.title) {
            this.dataIndex = index
          }
        })
      })
    }
  }
}
</script>

<style lang='less' scoped>
#Search {
  background: rgba(255, 255, 255, 1);
  .search {
    background: rgba(255, 255, 255, 1);
    display: flex;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    padding: 20px 25px; /*px*/
    height: 100px; /*px*/
    div {
      width: 100%;
      position: relative;
      margin: 0 25px;
      span {
        position: absolute;
        top: 50%;
        left: 25px;
        transform: translateY(-50%);
      }
      input {
        width: 100%;
        font-size: 24px; /*px*/
        background: rgba(200, 200, 200, 0.6);
        width: 100%;
        height: 60px;
        border-radius: 30px;
        padding: 0 0 0 70px;
        margin: 0;
      }
    }
    button {
      font-size: 24px; /*px*/
      background: rgba(255, 0, 0, 1);
      color: rgba(255, 255, 255, 1);
      padding: 10px 25px;
    }
  }
  .cont {
    ul {
      width: 100%;
      background: rgba(255, 255, 255, 1);
      position: absolute;
      border-bottom: 1px solid rgba(155, 155, 155, 1);
      li {
        padding: 10px 25px;
      }
    }
  }
}
</style>
